<template>
  <FullscreenCard class="wrapper">
    <div class="grid" ref="charDom"/>
	</FullscreenCard>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import FullscreenCard from '@/components/FullscreenCard'

const codeSelectVisible = ref<Boolean>(false)

const charDom = ref<any>([])

const dataList = [{
  id: '1',
  name: '密度',
  data: [
    [0.2, 400],
    [0.6, 800],
    [0.4, 1200],
    [0.7, 1600],
    [1.5, 2000],
    [1.7, 2400],
  ]
}, {
  id: '2',
  name: '漏斗',
  data: [
    [0.3, 400],
    [0.6, 800],
    [0.4, 1200],
    [0.7, 1600],
    [1.5, 2000],
    [1.8, 2400],
  ]
}, {
  id: '3',
  name: '初切',
  data: [
    [0.4, 400],
    [0.6, 800],
    [0.4, 1200],
    [0.7, 1600],
    [1.5, 2000],
    [0.8, 2400],
  ]
}, {
  id: '4',
  name: '动切',
  data: [
    [0.4, 400],
    [0.6, 800],
    [0.4, 1200],
    [0.7, 1600],
    [1.5, 2000],
    [0.8, 2400],
  ]
}, {
  id: '5',
  name: '终切',
  data: [
    [0.5, 400],
    [0.6, 800],
    [0.4, 1200],
    [0.7, 1600],
    [1.5, 2000],
    [0.8, 2400],
  ]
}, {
  id: '6',
  name: '塑性',
  data: [
    [0.7, 400],
    [0.5, 800],
    [0.4, 1200],
    [0.7, 1600],
    [1.5, 2000],
    [0.8, 2400],
  ]
}]

// const rawData:any = [
//   [0, 140, 210, 250, 210, 260, 320],
//   [1, 180, 240, 280, 240, 330, 370],
//   [2, 220, 310, 360, 280, 370, 430],
//   [3, 250, 320, 380, 340, 390, 480],
//   [4, 290, 380, 470, 330, 440, 570],
//   [5, 290, 350, 490, 340, 430, 570],
// ]
const dataByList = dataList.map((v, i) => [i, ...v.data.map(_ => _[1])])
const dataByListX = dataList.map((v, i) => [i, ...v.data.map(_ => _[0])])
console.log('dataByList', dataByList, 'dataByListX',dataByListX)


// const renderItem = (params:any = {}, api:any = {}) => {
//   const categoryIndex = api.value(0)
//   // console.log('categoryIndex', categoryIndex)
//   const points = dataByList.map((v:any, index:any) => {
//     // const _x = 0.85
//     const _x = dataByListX[categoryIndex][index]
//     console.log('_x',_x);
    
//     const unitBandWidth = (api.size([0, 0])[0] * _x) / (dataByList.length - 1)
//     const value = api.value(index + 1)
//     console.log('categoryIndex value', categoryIndex, value);
    
//     const point = api.coord([categoryIndex, value])
//     point[0] += unitBandWidth * (index - dataByList.length / 2 - 1) + unitBandWidth * _x
//     return point
//   })
//   console.log('points',categoryIndex, points)
//   return {
//     type: 'polyline',
//     transition: ['shape'],
//     shape: {
//       points,
//     },
//     style: api.style({
//       fill: null,
//       stroke: api.visual('color'),
//       lineWidth: 3
//     })
//   }
// }
// const data = [["4000", 116], ["3500", 129], ["3000", 135], ["2500", 86], 
// ["2000", 73], ["1500", 85], ["1000", 73], ["500", 68], ["0", 92]];
// const dateList = data.map(function (item) {
//   return item[0];
// });
// const valueList = data.map(function (item) {
//   return item[1];
// });

const initChart = () => {
  const myChart = echarts.init(charDom.value)
  const option =  {
    tooltip: {
      trigger: 'axis'
    },
    axisPointer: {
      link: [
        {
          xAxisIndex: 'all'
        }
      ]
    },
    grid: [
      {
        left: '5%',
        width: '15%',
      },
      {
        left: '20%',
        width: '15%',
      },
      {
        left: '35%',
        width: '15%',
      },
      {
        left: '50%',
        width: '15%',
      },
      {
        left: '65%',
        width: '15%',
      },
      {
        left: '80%',
        width: '15%',
      }
    ],
    yAxis: [
      {
        data: dataByList[0],
        gridIndex: 0,
        show: true,
        min: 0,
        // 分割线
        splitLine: { 
          show: true,
          lineStyle: {
            type: 'dashed' 
          }
        },
        // 不显示坐标轴上的文字
        axisLabel: {show: true },
        // 坐标轴线
        axisLine: { show: false },
        // 刻度线
        axisTick: { show: false },
      },
      {
        data: dataByList[1],
        gridIndex: 1,
        show:true, 
        min: 0,
        // 分割线
        splitLine: { 
          show: true,
          lineStyle: {
            type: 'dashed' 
          }
        },
        // 不显示坐标轴上的文字
        axisLabel: {show: false },
        // 坐标轴线
        axisLine: { show: false },
        // 刻度线
        axisTick: { show: false },
      },
      {
        data: dataByList[2],
        gridIndex: 2,
        show:true, 
        min: 0,
        // 分割线
        splitLine: { 
          show: true,
          lineStyle: {
            type: 'dashed' 
          }
        },
        // 不显示坐标轴上的文字
        axisLabel: {show: false },
        // 坐标轴线
        axisLine: { show: false },
        // 刻度线
        axisTick: { show: false },
      },
      {
        data: dataByList[3],
        gridIndex: 3,
        show:true, 
        min: 0,
        // 分割线
        splitLine: { 
          show: true,
          lineStyle: {
            type: 'dashed' 
          }
        },
        // 不显示坐标轴上的文字
        axisLabel: {show: false },
        // 坐标轴线
        axisLine: { show: false },
        // 刻度线
        axisTick: { show: false },
      },
      {
        data: dataByList[4],
        gridIndex: 4,
        show:true, 
        min: 0,
        // 分割线
        splitLine: { 
          show: true,
          lineStyle: {
            type: 'dashed' 
          }
        },
        // 不显示坐标轴上的文字
        axisLabel: {show: false },
        // 坐标轴线
        axisLine: { show: false },
        // 刻度线
        axisTick: { show: false },
      },
      {
        data: dataByList[5],
        gridIndex: 5,
        show:true, 
        min: 0,
        // 分割线
        splitLine: { 
          show: true,
          lineStyle: {
            type: 'dashed' 
          }
        },
        // 不显示坐标轴上的文字
        axisLabel: {show: false },
        // 坐标轴线
        axisLine: { show: false },
        // 刻度线
        axisTick: { show: false },
      }
    ],
    xAxis: [
      {
        show: false,
        gridIndex: 0,
        boundaryGap: false,
        // 分割线
        splitLine: { show: false },
        // 坐标轴线
        axisLine: { show: false },
        // 刻度线
        axisTick: { show: false },
      },
      {
        show: false,
        gridIndex: 1,
        boundaryGap: false,
        // 分割线
        splitLine: { show: false },
        // 坐标轴线
        axisLine: { show: false },
        // 刻度线
        axisTick: { show: false },
      },
      {
        show: false,
        gridIndex: 2,
        boundaryGap: false,
        // 分割线
        splitLine: { show: false },
        // 坐标轴线
        axisLine: { show: false },
        // 刻度线
        axisTick: { show: false },
      },
      {
        show: false,
        gridIndex: 3,
        boundaryGap: false,
        // 分割线
        splitLine: { show: false },
        // 坐标轴线
        axisLine: { show: false },
        // 刻度线
        axisTick: { show: false },
      },
      {
        show: false,
        gridIndex: 4,
        boundaryGap: false,
        // 分割线
        splitLine: { show: false },
        // 坐标轴线
        axisLine: { show: false },
        // 刻度线
        axisTick: { show: false },
      },
      {
        show: false,
        gridIndex: 5,
        boundaryGap: false,
        // 分割线
        splitLine: { show: false },
        // 坐标轴线
        axisLine: { show: false },
        // 刻度线
        axisTick: { show: false },
      }
    ],
    
    series: [
      {
        type: 'line',
        symbolSize: 10,
        symbol: 'circle',
        smooth: false,
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(0,0,0,0.3)',
          shadowBlur: 10,
          shadowOffsetY: 8
        },
        data: dataByListX[0],
        xAxisIndex: 0,
        yAxisIndex: 0
      },
      {
        type: 'line',
        symbolSize: 10,
        symbol: 'circle',
        smooth: false,
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(0,0,0,0.3)',
          shadowBlur: 10,
          shadowOffsetY: 8
        },
        data: dataByListX[1],
        xAxisIndex: 1,
        yAxisIndex: 1
      },
      {
        type: 'line',
        symbolSize: 10,
        symbol: 'circle',
        smooth: false,
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(0,0,0,0.3)',
          shadowBlur: 10,
          shadowOffsetY: 8
        },
        data: dataByListX[2],
        xAxisIndex: 2,
        yAxisIndex: 2
      },
      {
        type: 'line',
        symbolSize: 10,
        symbol: 'circle',
        smooth: false,
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(0,0,0,0.3)',
          shadowBlur: 10,
          shadowOffsetY: 8
        },
        data: dataByListX[3],
        xAxisIndex: 3,
        yAxisIndex: 3
      },
      {
        type: 'line',
        symbolSize: 10,
        symbol: 'circle',
        smooth: false,
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(0,0,0,0.3)',
          shadowBlur: 10,
          shadowOffsetY: 8
        },
        data: dataByListX[4],
        xAxisIndex: 4,
        yAxisIndex: 4
      },
      {
        type: 'line',
        symbolSize: 10,
        symbol: 'circle',
        smooth: false,
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(0,0,0,0.3)',
          shadowBlur: 10,
          shadowOffsetY: 8
        },
        data: dataByListX[5],
        xAxisIndex: 5,
        yAxisIndex: 5
      }
    ]
  }

  myChart.setOption(option)

  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

onMounted(() => {
  initChart()
})
</script>

<style lang="scss" scoped>
.wrapper {
  padding: 20px;
	background-color: var(--vt-c-white);
}
.grid {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
</style>
